<template>
  <div class="author-manage">
    <search-box @getData="getSearchData" type="author" :options="options" />
    <a-table
      :scroll="{ y: 400 }"
      style="margin: 30px 0; height: 400px"
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 5, total: total }"
      :loading="loading"
      @change="changePage"
    >
      <span slot="pic" slot-scope="text, record">
        <div
          style="
            width: 50px;
            heigth: 50px;
            border-radius: 25px;
            overflow: hidden;
          "
        >
          <img style="height: 50px" :src="record.avatar" />
        </div>
      </span>
    </a-table>
    <a-modal
      title="详情"
      :dialog-style="{ top: '20px' }"
      :visible="modal1Visible"
      cancelText="取消"
      okText="确定"
      :width="1200"
      centered
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <authorChangeModal  :authorInfo="authorInfo"/>
    </a-modal>
    <a-modal
      title="新增"
      :dialog-style="{ top: '20px' }"
      :visible="modalVisible"
      cancelText="取消"
      okText="确定"
      :width="1200"
      centered
      @ok="() => setModalVisible(false)"
      @cancel="() => setModalVisible(false)"
    >
      <authorModal  />
    </a-modal>
  </div>
</template>

<script>
const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    photo: `Edward King ${i}`,
    sum: 32,
    sample: `London, Park Lane no. ${i}`,
    date: "2021-7-31",
  });
}
import authorModal from './author-modal.vue'
import authorChangeModal from "./ author-change-modal.vue";
import searchBox from "@/components/search-box";
import { getForm,search } from "../../../API/index";
export default {
  components: {
    searchBox,
    authorChangeModal,
    authorModal
  },
  data() {
    return {
      data,
      total: 0,
      modal1Visible: false,
      modalVisible:false,
      loading: false,
      searchPrams:null,
      authorInfo:{},
      options: [
        {
          value: "englishName",
          text: "英文名",
          ischoose: false,
        },
        {
          value: "chineseName",
          text: "中文名",
          ischoose: false,
        },
      ],
      columns: [
        {
          title: "艺术家",
          dataIndex: "avatar",
          scopedSlots: { customRender: "pic" },
        },
        {
          title: "中文名",
          dataIndex: "englishName",
        },
        {
          title: "英文名",
          dataIndex: "chineseName",
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: 200,
          customRender: (value, record, index) => {
            const obj = {
              children: (
                // @click="() => save(record.key)"
                <div class="operation">
                  <span style="color:#4EA3FB" onClick={(e) => this.showModal2(record)}>
                    {" "}
                    详情{" "}
                  </span>
                  <span
                    style="color:red"
                    onclick={() => {
                      this.download(record);
                    }}
                  >
                    {" "}
                    删除{" "}
                  </span>
                </div>
              ),
              attrs: {},
            };

            return obj;
          },
        },
      ],
    };
  },
  
  created() {
    this.getData(1);
  },
  methods: {
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
    },
    setModalVisible(modalVisible){
      this.modalVisible = modalVisible;
    },
    showModal2(e) {
      console.log(e);
      this.authorInfo = e
      this.modal1Visible = true;
    },
    showModal(){
      this.modalVisible = true;
    },
    changePage(e) {
      console.log(e);
      if(this.searchPrams!=null){
        this.getData(e.current,this.searchPrams,'search');
      }else{
        this.getData(e.current);
      }
    },
    getData(page, params,type ) {
      this.loading = true;
      console.log(page, type, params)
      if (type == "search") {
        let data = {
          form: "author",
          size: 5,
          page: page,
          data: {
            ...params
          },
        }
      search(data).then((res) => {
        this.data = res.data.list;
        this.total = res.data.sum;
        this.loading = false;
      });
      }else{
        let data = {
        form: "author",
        operation: "all",
        size: 5,
        page: page,
      };
      getForm(data).then((res) => {
        this.data = res.data.list;
        this.total = res.data.sum;
        this.loading = false;
      });
      }
      
    },
    searchData(data) {},
    getSearchData(e) {
      this.searchPrams = e
      this.getData(1,this.searchPrams,'search');
    },
  },
};
</script>

<style>
.author-manage {
  width: 100%;
  height: 100%;
  padding: 50px;
  text-align: left;
  overflow: scroll;
}
</style>